<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="title"
    :showTop="false"
    :dark="loaded ? false : true"
    :hideSafeArea="true"
  >
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'">
      <view
        class="content"
        :style="'height:calc(100vh - 200rpx - ' + navHeight + 'px);'"
      >
        <view class="successIcon" v-if="showSuccess">
          <img :src="zhituPaySuccessIcon" alt="" class="zhituPaySuccessIcon" />
        </view>
        <view class="successText" v-if="showSuccess"> 支付成功 </view>
        <view class="consultantInfo" v-if="orderInfo.consultantInfo">
          <view class="consultantInfoTitle">您的职途顾问</view>
          <view
            class="consultant-card"
            @click="gotoConsultantInfo(orderInfo.consultantInfo)"
          >
            <view class="online-chat" @click.stop="toChat">
              <image class="btn" :src="onlineChat"></image>
            </view>
            <view class="header">
              <view class="avatar-box">
                <image
                  class="avatar"
                  :src="orderInfo.consultantInfo.pic || consultantAvatar"
                ></image>
                <!-- <view class="status">{{
                  orderInfo.consultantInfo.isOnline == 1 ? "在线" : ""
                }}</view> -->
              </view>
              <view class="info-box">
                <view class="name-box">
                  <text class="name">{{ orderInfo.consultantInfo.iname }}</text>
                  <image class="vip" :src="consultantVip"></image>
                </view>
                <view class="number-box">
                  <image class="star" :src="consultantStar"></image>
                  <text class="name">{{
                    orderInfo.consultantInfo.star || '5.0'
                  }}</text>
                  <text class="line"></text>
                  <text class="text">服务过</text>
                  <text class="count"
                    >{{ orderInfo.consultantInfo.serviceCount || '500' }}+</text
                  >
                  <text class="text">人</text>
                </view>
                <view class="tag-box">
                  <view
                    class="tag"
                    v-for="item in orderInfo.consultantInfo.consultantTagList"
                    :key="item"
                    >{{ item }}
                  </view>
                </view>
              </view>
            </view>
            <view class="comment-box">
              <view class="message-box">
                <image class="message" :src="consultantChat"></image>
                <text class="text">好评：</text>
              </view>
              <text class="comment">{{
                orderInfo.consultantInfo.positiveDesc ||
                '挖掘精准，非常感谢顾问的耐心的服务，帮我找出了很多我以前没注意到的重要部分'
              }}</text>
            </view>
          </view>
        </view>
        <view class="orderInfo">
          <view class="orderInfoTitle">商品信息</view>
          <view class="orderContainer">
            <view
              class="orderItem"
              v-for="(item, index) in orderInfo.orderDetail.itemList"
              :key="index"
            >
              <view class="orderLeft">
                <img :src="item.productImg" class="orderImg" alt="" />
              </view>
              <view class="orderCenter">
                <text class="orderName">{{ item.productName }}</text>
                <text class="orderDesc">{{ item.productDesc }}</text>
              </view>
              <view class="orderRight">
                <view class="orderPayprice"
                  >实付：<view class="rmb">¥</view>
                  <view class="number">{{ item.price }}</view>
                </view>
                <view class="orderPrice"
                  >原价：<view class="rmb">¥</view>
                  <view class="number">{{ item.originPrice }}</view>
                </view>
              </view>
            </view>
          </view>

          <view class="orderDetail">
            <view class="orderPayInfo">
              <view class="orderDeatilLeft"> 实付款 </view>
              <view class="orderDeatilRight">
                已优惠
                <view class="discount orange">
                  <view class="rmb">¥</view>
                  {{ orderInfo.orderDetail.discountAmount || '--' }}
                </view>
                合计
                <view class="orange">
                  <view class="rmb">¥</view>
                  <view class="number big">{{
                    orderInfo.orderDetail.price
                  }}</view>
                </view>
              </view>
            </view>
            <view class="orderPayNumber">
              <view class="orderDeatilLeft"> 订单号 </view>
              <view class="orderDeatilRight">
                <view class="orderNum">{{
                  orderInfo.orderDetail.orderNo || '--'
                }}</view>
                <view
                  class="orderNumCopy"
                  @click="handleCopy(orderInfo.orderDetail.orderNo)"
                  >复制</view
                >
              </view>
            </view>
            <view class="orderPayTime">
              <view class="orderDeatilLeft"> 下单时间 </view>
              <view class="orderDeatilRight">
                {{ orderInfo.orderDetail.payTime || '--' }}
              </view>
            </view>
            <view class="orderPayMethod">
              <view class="orderDeatilLeft"> 支付方式 </view>
              <view class="orderDeatilRight">
                {{ orderInfo.orderDetail.payTypeName || '--' }}
              </view>
            </view>
            <view class="orderPayMobile">
              <view class="orderDeatilLeft"> 手机号 </view>
              <view class="orderDeatilRight">
                {{ orderInfo.orderDetail.payPhone || '--' }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="btns">
        <view class="returnBtn" @click="toCareerPathIndex"
          >去体验更多职途工具</view
        >
        <view class="directionBtn" @click="handleToUseRight">{{
          btnName
        }}</view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { env } from '@/api/root';
import { orderDetail } from '@/api/modules/career.js';
import IMEventHandler from '@/utils/im';
import { addBuryingPoint } from '@/api/modules/career';
export default {
  data() {
    return {
      orderNo: '',
      btnName: '去使用服务',
      orderInfo: {}, //注意!!最外层是orderInfo,里面才是orderDetail,和后端接口命名不一样
      showSuccess: true,
      orderList: [
        {
          orderImg: this.$imgBase + 'careerPath/consultantVip.png',
          orderName: '简历优化',
          orderDesc: '30天保修，专家定制简历',
          price: 299,
          payPrice: 199
        },
        {
          orderImg: this.$imgBase + 'careerPath/consultantVip.png',
          orderName: '简历优化',
          orderDesc: '30天保修，专家定制简历',
          price: 299,
          payPrice: 199
        }
      ],
      mallOrderId: null,
      title: '支付成功',
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      personName: uni.getStorageSync('personName') || undefined,
      navHeight: getApp().globalData.navHeight,
      //支付成功后跳转的路由
      directionMapper: {
        1: `/pagesSub/userCenter/careerPathV2/index`, //disc测评 特殊处理
        2: `/pagesSub/career/activity/vocationalAssessment`, //职业测评
        4: `/pagesSub/career/activity/ResumeDiagnosis?fromWhere=careerPath`, //简历诊断
        7: `/pagesSub/userCenter/careerPathV2/components/CreateAndDeliverCareerPathReport`, // 生成职途报告
        9: `/pagesSub/careerNew/selectCareerReport/index?rightCount=${3}`, //职业报告
        17: `/pagesSub/companyCenter/interviewAI/majorSearchAI?userNum=0&rightCount=3`, //AI面试
        21: `/pagesSub/userCenter/careerPathV2/components/CreateAndDeliverCareerPathReport` // 生成职途报告
      },
      zhituNameMapper: {
        1: '性格测评', //disc测评
        2: '职业测评', //职业测评
        4: '简历诊断', //简历诊断
        7: '职途报告', //职途报告
        9: '职业报告', //职业报告
        17: 'AI面试' //AI面试
      },
      zhituPaySuccessIcon:
        this.$imgBaseSelf + 'careerPath/zhituPaySuccessIcon_new.png',

      consultantStar: this.$imgBase + 'careerPath/consultantStar.png',
      consultantVip: this.$imgBase + 'careerPath/consultantVip.png',
      consultantChat: this.$imgBase + 'careerPath/consultantChat.png',
      onlineChat: this.$imgBase + 'careerPath/onlineChat.png',
      targePath: '', // 目标文件名称
      buryingPointId: '',
      cardType: uni.getStorageSync('cardType')
    };
  },
  onShow() {
    this.addBuryingPointFn(20057, '', '', '', '');
    this.addBuryingPointFn(20058, '', '', '', '');
  },
  onHide() {
    console.log('这里进入了onHide周期');
    this.addBuryingPointFn(20058, '', '', '', '');
  },
  onUnload() {
    console.log('这里进入了onUnload周期');
    this.addBuryingPointFn(20058, '', '', '', '');
  },
  onLoad(opt) {
    console.log('opt', opt);
    if (opt.fromWhere == 'serviceNotice' || opt.fromWhere == 'myOrderPage') {
      this.showSuccess = false;
      this.title = '';
    }
    this.mallOrderId = opt.mallOrderId;
    if (!opt.mallOrderId) {
      uni.showToast({
        icon: 'none',
        title: '无法查询到订单信息',
        duration: 10000
      });
    }
    if (opt.orderNo) {
      this.orderNo = opt.orderNo;
    }
    this.getOrderDetail();
  },
  mounted() {},
  methods: {
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : '', //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync('person-id').slice(2) || '0',
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync('cardType'),
        consultantId: uni.getStorageSync('sellId')
          ? uni.getStorageSync('sellId')
          : '',
        originType: this.originFrom == 'shareLink' ? 10 : 20,
        statType: statType ? statType : '10',
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType
      };
      const res = await addBuryingPoint(params);
      if (res.code == 200) {
        if (res.data.id) {
          if (etId == 20058) this.buryingPointId = res.data.id;
        }
      }
    },
    handleCopy(data) {
      if (data) {
        uni.setClipboardData({
          data: data,
          success: function () {
            uni.showToast({
              icon: 'none',
              title: '复制成功',
              duration: 2000
            });
          }
        });
      }
    },
    toChat() {
      //先判空
      if (
        !this.orderInfo ||
        !this.orderInfo.consultantInfo ||
        !this.orderInfo.consultantInfo.consultantId
      ) {
        uni.showToast({
          icon: 'none',
          title: '没有查询到顾问信息',
          duration: 3000
        });
        return;
      }
      uni.setStorageSync('consultantInfo', this.orderInfo.consultantInfo);
      // 是否登录im
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        uni.showLoading({
          title: '正在连接',
          mask: true
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 5000);
        let isFirst = true;
        try {
          new IMEventHandler(() => {
            if (isFirst) {
              isFirst = false;
              uni.hideLoading();
              uni.navigateTo({
                // url: `/pagesSub/message/chat/index?chatId=${this.consultantInfo.consultantId}__consultant`,
                url: `/pagesSub/message/newChat/index?chatId=${this.orderInfo.consultantInfo.consultantId}_consultant&isZhituUser=1`
              });
            }
          });
        } catch (error) {
          console.log('error', error);
        }
      } else {
        uni.navigateTo({
          url: `/pagesSub/message/newChat/index?chatId=${this.orderInfo.consultantInfo.consultantId}_consultant&isZhituUser=1`
        });
      }
    },
    getOrderDetail() {
      uni.showLoading({
        title: '加载中'
      });
      const params = {
        personId: this.personId,
        mallOrderId: this.mallOrderId,
        orderNo: this.orderNo
      };
      orderDetail(params)
        .then((res) => {
          if (res.code == 200) {
            this.orderInfo = res.data;
            if (this.orderInfo.orderDetail.itemList) {
              const itemList = this.orderInfo.orderDetail.itemList;
              const arr = [
                'RESUME_OPTIMIZATION',
                'INTERVIEW_COACHING',
                'CAREER_PLAN',
                'HIGH_SCHOOL_ASSESSMENT'
              ];
              const goChat = itemList.find((item, index) => {
                const productSign = item.productSign;
                return arr.includes(productSign);
              });
              if (goChat) {
                this.btnName = '添加顾问, 立即咨询';
              }
            }
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    toCareerPathIndex() {
      this.addBuryingPointFn(20061, '', '', '', '');
      uni.navigateTo({
        url: `/pagesSub/userCenter/careerPathV2/index`
      });
    },
    gotoConsultantInfo(consultantInfo) {
      this.addBuryingPointFn(20062, '', '', '', '');
      if (consultantInfo) {
        uni.navigateTo({
          url:
            '/pagesSub/userCenter/careerPathV2/components/ConsultantDetail?personId=' +
            consultantInfo.consultantId
        });
      } else {
        this.returnToZhituIndex();
      }
    },
    async getPersonRightNumFn(rightId) {
      const params = {
        personId: this.personId || undefined,
        rightId,
        cardType: this.cardType
      };
      const res = await getPersonRightNum(params);
      return res.data.ownNum - res.data.useNum;
    },
    async handleToUseRight() {
      this.addBuryingPointFn(20060, '', '', '', '');
      wx.reportEvent('consult_help_buy_success_click', {}); //购买成功页—点击咨询顾问
      //先判断买了多少个权益，如果超过1个就是去职途主页，如果一个那就去这一个的页面
      const itemList = this.orderInfo.orderDetail.itemList || [];
      //如果没有列表就直接去主页
      if (itemList) {
        //先判断有一个的情况
        if (itemList.length == 1) {
          const rightItem = itemList[0];

          //处理一些不是权益的产品一般是一些套餐什么的
          if (rightItem.productType == 2) {
            if (this.orderInfo.consultantInfo) {
              this.toChat();
            } else {
              this.returnToZhituIndex();
            }
            return;
          }
          //权益套餐
          if (rightItem.productType == 3) {
            this.returnToZhituIndex();
            return;
          }
          //跳转权益的
          if (rightItem.rightId == 1) {
            const discLeftUseNum = await this.getPersonRightNumFn(1); // 性格测评的内层rightId是1
            let url;
            if (env == 'test') {
              url = `https://3gtest.crm1001.com/disc/#/disc/question?personId=${this.personId}&iname=${this.personName}&phone=18825449087&from=miniprogramV2&discLeftUseNum=${discLeftUseNum}&cardType=${this.cardType}`;
            } else if (env == 'pro' || env == 'pre') {
              url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${this.personId}&iname=${this.personName}&phone=18825449087&from=miniprogramV2&discLeftUseNum=${discLeftUseNum}&cardType=${this.cardType}`;
            }
            uni.redirectTo({
              url:
                '/pagesSub/public/web/descWebView?link=' +
                encodeURIComponent(url)
            });
            return;
          } else {
            let url = this.directionMapper[rightItem.rightId];
            console.log('rightItem.rightId', rightItem.rightId);

            if (rightItem.rightId == 9) {
              url = url + `&rightId=${rightItem.rightId}`;
              console.log('url', url);
            }
            if (url) {
              if (this.showSuccess) {
                uni.redirectTo({
                  url
                });
              } else {
                uni.navigateTo({
                  url
                });
              }
            } else {
              this.returnToZhituIndex();
            }
          }
        } else {
          //如果是多个，并且存在有顾问服务的情况 就去聊天
          const arr = [
            'RESUME_OPTIMIZATION',
            'INTERVIEW_COACHING',
            'CAREER_PLAN',
            'HIGH_SCHOOL_ASSESSMENT'
          ];
          const goChat = itemList.find((item, index) => {
            const productSign = item.productSign;
            return arr.includes(productSign);
          });
          if (goChat) {
            this.toChat();
          } else {
            this.returnToZhituIndex();
          }
        }
      } else {
        this.returnToZhituIndex();
      }
    },
    returnToZhituIndex() {
      uni.navigateTo({
        url: `/pagesSub/userCenter/careerPathV2/index`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + 'careerPath/';
@include img-base-self('.person-top', 'careerPath/upPart.png?v=1');

@font-face {
  font-family: 'D-DIN-PRO-700-Bold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf');
}

.wrapper {
  background-image: url($img-base + 'careerPath/zhituPayFinishBg.png');
  background-size: 100% auto;
  background-repeat: no-repeat;

  .content {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    align-items: center;
    overflow-y: scroll;
    padding-bottom: 100rpx;

    .successIcon {
      .zhituPaySuccessIcon {
        width: 240rpx;
        height: 240rpx;
      }
    }

    .successText {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 40rpx;
      color: #222222;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      margin-top: 12rpx;
    }

    .consultantInfo {
      width: calc(100vw - 32rpx);
      background-color: white;
      margin: 44rpx 16rpx 0rpx;
      padding: 20rpx;
      border-radius: 12rpx;

      .consultantInfoTitle {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        margin-bottom: 20rpx;
      }

      .consultant-card {
        width: calc(100vw - 72rpx);
        background: url($img-base + 'careerPath/myConsultBg.png') no-repeat;
        background-size: 100% 100%;
        border-radius: 24rpx;
        padding: 24rpx;
        position: relative;

        .online-chat {
          position: absolute;
          top: 20rpx;
          right: 20rpx;

          .btn {
            width: 166rpx;
            height: 52rpx;
          }
        }

        .header {
          display: flex;

          .avatar-box {
            position: relative;
            margin-right: 24rpx;

            .avatar {
              width: 120rpx;
              height: 142rpx;
              border-radius: 16rpx;
              object-fit: cover;
            }

            .status {
              width: 120rpx;
              height: 64rpx;
              position: absolute;
              background: linear-gradient(
                180deg,
                rgba(237, 248, 253, 0) 0%,
                #67b98e 100%
              );
              border-radius: 25rpx 25rpx 14rpx 14rpx;
              bottom: -1rpx;
              display: flex;
              align-items: flex-end;
              justify-content: center;
              font-size: 24rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              color: #ffffff;
              padding-bottom: 4rpx;
            }
          }

          .info-box {
            .name-box {
              display: flex;
              align-items: center;

              .name {
                font-size: 32rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 600;
                color: #ffffff;
              }

              .vip {
                width: 32rpx;
                height: 32rpx;
                margin-left: 2rpx;
              }
            }

            .number-box {
              display: flex;
              align-items: center;
              font-size: 28rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 600;
              color: #cecece;
              margin-top: 18rpx;

              .star {
                width: 24rpx;
                height: 24rpx;
                margin-right: 12rpx;
              }

              .line {
                width: 2rpx;
                height: 22rpx;
                background: #7e99ab;
                margin: 0 20rpx;
              }

              .count {
                font-size: 28rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 600;
                color: #cecece;
                margin: 0 12rpx;
              }
            }

            .tag-box {
              display: flex;
              margin-top: 14rpx;

              .tag {
                line-height: 44rpx;
                height: 44rpx;
                text-align: center;
                background: #344063;
                border-radius: 4rpx;
                opacity: 0.73;
                padding: 0 14rpx;
                color: #eed9b5;
                font-size: 24rpx;

                &:not(:last-child) {
                  margin-right: 12rpx;
                }
              }
            }
          }
        }

        .comment-box {
          padding: 20rpx 22rpx;
          background: linear-gradient(114deg, #1a274f 0%, #3f4f7a 100%);
          border-radius: 16rpx;
          opacity: 0.73;
          margin-top: 30rpx;
          position: relative;

          .message-box {
            position: absolute;
            left: 20rpx;
            top: 21rpx;
            display: flex;

            .message {
              width: 32rpx;
              height: 32rpx;
              flex-shrink: 0;
              margin-right: 6rpx;
              margin-top: 4rpx;
            }

            .text {
              font-size: 28rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #e4d1af;
              display: inline-block;
              flex-shrink: 0;
            }
          }

          .comment {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #cccccc;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; // 控制多行的行数
            -webkit-box-orient: vertical;
            text-indent: 4em;
          }
        }
      }
    }

    .orderInfo {
      width: calc(100vw - 32rpx);
      background-color: white;
      margin: 26rpx 16rpx 0rpx;
      padding: 20rpx;
      border-radius: 12rpx;
      padding-bottom: 36rpx;

      .orderInfoTitle {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #222222;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        margin-bottom: 20rpx;
      }

      .orderContainer {
        // padding-bottom: 30rpx;
        border-bottom: 2rpx solid #eaeaea;

        .orderItem {
          display: flex;
          margin-bottom: 30rpx;

          .orderLeft {
            margin-right: 26rpx;

            .orderImg {
              width: 148rpx;
              height: 148rpx;
              border-radius: 18rpx;
            }
          }

          .orderCenter {
            display: flex;
            flex-direction: column;
            // justify-content: space-between;
            // max-width: 280rpx;
            flex: 1;
            margin-right: 68rpx;

            .orderName {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 800;
              font-size: 30rpx;
              color: #333333;
              line-height: 42rpx;
              text-align: left;
              font-style: normal;
              margin-bottom: 18rpx;
            }

            .orderDesc {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #888888;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
          }

          .orderRight {
            display: flex;
            flex-direction: column;
            vertical-align: bottom;

            .orderPayprice {
              display: flex;
              align-items: flex-end;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #222222;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;

              .number {
                font-size: 44rpx;
                line-height: 44rpx;
                font-weight: bold;
                font-family: D-DIN-PRO-700-Bold;
              }
            }

            .orderPrice {
              display: flex;
              align-items: flex-end;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #bfbfbf;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              margin-top: 16rpx;

              .number {
                font-size: 36rpx;
                line-height: 36rpx;
                font-weight: bold;
                font-family: D-DIN-PRO-700-Bold;
              }
            }

            .rmb {
              font-size: 24rpx;
            }
          }
        }
      }

      .orderDetail {
        margin-top: 46rpx;

        & > view {
          display: flex;
          justify-content: space-between;
          margin-bottom: 44rpx;
          padding: 0 4rpx;

          &:last-of-type {
            margin-bottom: 0;
          }

          .orderDeatilLeft {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 30rpx;
            color: #999999;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
          }

          .orderDeatilRight {
            display: flex;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 30rpx;
            color: #888888;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
            letter-spacing: 2rpx;
          }
        }

        .orderPayInfo {
          .orderDeatilRight {
            color: #222222;
          }

          .rmb {
            margin: 0 8rpx;
          }

          .orange {
            display: flex;
            color: #ff711e;
            letter-spacing: -2rpx;
          }

          .number {
            font-size: 32rpx;
            font-family: D-DIN-PRO-700-Bold;
          }

          .discount {
            margin-right: 24rpx;
          }

          .big {
            font-size: 48rpx;
            line-height: 18rpx;
            letter-spacing: 0rpx;
          }
        }

        .orderPayNumber {
          .orderNum {
            padding-right: 26rpx;
            border-right: 2rpx solid #979797;
          }

          .orderNumCopy {
            color: #222222;
            margin-left: 26rpx;
          }
        }
      }
    }
  }

  .btns {
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    width: 100vw;
    padding: 18rpx 32rpx;
    padding-bottom: 86rpx;
    background-color: white;

    .returnBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      // margin: 0 32rpx;
      border-radius: 200rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #f75a3e;
      line-height: 36rpx;
      padding: 22rpx;
      border: 2rpx solid #f75a3e;
      flex-basis: 300rpx;
    }

    .directionBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      // margin: 0 32rpx;
      background: #f75a3e;
      border-radius: 200rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;
      padding: 22rpx;
      margin-left: 16rpx;
      flex: 1;
    }
  }
}
</style>
